<template>
  <div class="syHylb">
    <div class=""></div>
    <div id="echartsSyHylb" />
  </div>
</template>

<script>
export default {
  props: {
    dep_code: {
      type: String,
      default: '450000-00-0000',
      require: true
    }
  },
  data() {
    return {
      echartsSyHylb: null,
      option: {
        title: {
          text: '分行业 Top10',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        // legend: {
        //   textStyle: {
        //     color: '#fff'
        //   }
        // },
        grid: {
          top: '5%',
          left: '1%',
          right: '1%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: { show: false },
          axisLabel: { show: false }
        },
        yAxis: {
          type: 'category',
          inverse: true,
          axisTick: { show: false },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff' // 更改坐标轴文字颜色
            },
            formatter: (params, index) => {
              return [`${params}  {a${index + 1}|${index + 1}}`].join('\n')
            },
            rich: {
              a1: {
                color: '#fff',
                backgroundColor: 'red',
                width: 18,
                height: 18,
                align: 'center',
                borderRadius: 4
              },
              a2: {
                color: '#fff',
                backgroundColor: '#0000FF',
                width: 18,
                height: 18,
                align: 'center',
                borderRadius: 4
              },
              a3: {
                color: '#fff',
                backgroundColor: '#008000',
                width: 18,
                height: 18,
                align: 'center',
                borderRadius: 4
              },
              a4: {
                color: '#fff',
                backgroundColor: '#808080',
                width: 18,
                height: 18,
                align: 'center',
                borderRadius: 4
              },
              a5: {
                color: '#fff',
                backgroundColor: '#808080',
                width: 18,
                height: 18,
                align: 'center',
                borderRadius: 4
              },
              a6: {
                color: '#fff',
                backgroundColor: '#808080',
                width: 18,
                height: 18,
                align: 'center',
                borderRadius: 4
              },
              a7: {
                color: '#fff',
                backgroundColor: '#808080',
                width: 18,
                height: 18,
                align: 'center',
                borderRadius: 4
              },
              a8: {
                color: '#fff',
                backgroundColor: '#808080',
                width: 18,
                height: 18,
                align: 'center',
                borderRadius: 4
              },
              a9: {
                color: '#fff',
                backgroundColor: '#808080',
                width: 18,
                height: 18,
                align: 'center',
                borderRadius: 4
              },
              a10: {
                color: '#fff',
                backgroundColor: '#808080',
                width: 18,
                height: 18,
                align: 'center',
                borderRadius: 4
              }
            }
          },
          data: [
            '教育事业单位',
            '科学研究事业单位',
            '勘察设计事业单位',
            '勘探事业单位',
            '文化事业单位',
            '新闻出版事业单位',
            '广播影视事业单位',
            '卫生事业单位',
            '体育事业单位',
            '农林牧水事业单位'
          ]
        },
        color: ['rgba(0, 151, 251,0.5)', 'rgba(48, 236, 166,0.8)'],
        series: [
          {
            name: '编制',
            type: 'bar',
            itemStyle: {
              normal: {
                barBorderRadius: 10
              }
            },
            realtimeSort: true,
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [
              86425, 71526, 64825, 54268, 48627, 35218, 32486, 28468, 18645,
              11223
            ]
          },
          {
            name: '实有',
            type: 'bar',
            itemStyle: {
              normal: {
                barBorderRadius: 10
              }
            },
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [
              81352, 70582, 61258, 51268, 41627, 31214, 31486, 21468, 11645,
              10223
            ]
          }
        ]
      },
      depcode: '450000-00-0000'
    }
  },

  // watch: {
  //   dep_code(newValue, oldValue) {
  //     if (newValue) {
  //       (this.depcode = newValue), this.getFhy()
  //     }
  //   }
  // },
  mounted() {
    this.initEchartsSyHylb()
  },
  destroyed() {
    window.onresize = null
  },
  methods: {
    initEchartsSyHylb() {
      this.echartsSyHylb = this.$echarts.init(
        document.getElementById('echartsSyHylb')
      )
      this.echartsSyHylb.setOption(this.option)
      //响应式变化
      window.addEventListener(
        'resize',
        () => this.echartsSyHylb.resize(),
        false
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.syHylb {
  width: 100%;
  height: 64%;
  box-sizing: border-box;
  margin-bottom: 20px;
  // background-color: rgba(255, 255, 255, 0.03);
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  display: flex;
  flex-direction: column;

  #echartsSyHylb {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
